<template>
  <div>
    <input
      type="text"
      v-model='obj.a'
    >
    全选<input
      type="checkbox"
      v-model='checkAll'
    >
    <ul>
      <li v-for='item in ary'>
        <input
          type="checkbox"
          v-model='item.checked'
        >
      </li>
    </ul>
  </div>
</template>
<script>
// @ is an alias to /src
export default {
  data() {
    return {
      name: "66",
      ary: [
        { checked: true },
        { checked: true },
        { checked: true },
        { checked: true },
        { checked: true },
        { checked: true },
      ],
      obj: { a: 100 },
    };
  },
  computed: {
    // 这里的属性 也会被挂在到当前实例上
    reName() {
      console.log(this);
      return this.name.split("").reverse().join("");
    },
    // checkAll() {
    //   return this.ary.every((item) => item.checked);
    // },
    checkAll: {
      // 计算属性有缓存值  （只要依赖不改变 就不会重新执行对应的get函数）
      // 依赖：  在get函数中同步使用的vue变量
      get() {
        console.log("get执行了额");
        // console.log(this.name);
        setTimeout(() => {
          // console.log(this.name);
        }, 0);
        return this.ary.every((item) => item.checked);
      },
      set(val) {
        console.log(val);
        this.ary.forEach((item) => (item.checked = val));
      },
    },
  },
  // 侦听器
  watch: {
    // 监听的属性一定是已经存在属性
    // name(val, oldV) {
    //   // 只要name改变  这个函数就会执行
    //   console.log("name", val, oldV);
    // },
    name: {
      immediate: true, // 进来就执行
      handler(val, oldV) {
        console.log("name", val, oldV);
      },
    },
    // obj() {
    //   console.log("obj.a改变了");
    // },
    obj: {
      deep: true,
      handler(val, oldV) {
        console.log("obj.a改变了");
      },
    },
    "obj.a"() {
      console.log("之间听obj.a");
    },
  },
};
</script>
<style lang="less">
</style>